<template>
  <div class="html">
    <setting-header :num="num"></setting-header>
    <!--主体部分-->
    <div class="body">
      <span class="manage">Manage payment options</span>
      <span class="explain">Any payment methods you save to Kickstarter will be listed here (securely) for your convenience. To save a card for future pledes, just click”Add a new card.”</span>
      <!--填写信息的表单-->
      <form>
        <span class="title cardNum">
          <label>SettingPaymentMethods</label>
          <span></span><span></span><span></span><span></span><span></span>
        </span>
        <input type="text" placeholder="Card number" class="cardNum-input"/>
        <span class="title Cardholder">
          <label>Cardholder name</label>
          <span>Expiration</span>
          <span>Security code</span>
        </span>
        <input type="text" placeholder="Name" class="name"/><button class="mm">MM</button><button class="yy">YY</button><input type="text" class="null"/>
        <input type="submit" class="save" value="Save" />
      </form>
    </div>
    <setting-footer></setting-footer>
  </div>

</template>

<script>
  import settingHeader from '../public/SettingHeader'
  import settingFooter from '../public/SettingFooter'

    export default {
        name: "setting-payment-methods",
        components:{ settingHeader, settingFooter },
        data(){
            return{
              num:3
            }
        }
    }
</script>

<style scoped lang="scss">
.body{
  padding-left: 200px;
  box-sizing: border-box;
  box-shadow: 0 2px 0 0 #DDDDDD;
  padding-bottom: 72px;
  span{display: block;}
}
  .manage{
    font-family: PingFangSC-Medium;
    font-size: 22px;
    color: #2E2E2E;
    letter-spacing: -0.4px;
    margin: 54px 0 24px 0;
  }
  .explain{
    font-family: PingFangSC-Regular;
    font-size: 16px;
    color: #2E2E2E;
    letter-spacing: -0.15px;
    line-height: 24px;
    width: 620px;
    margin-bottom: 52px;
  }
  /*填写信息的表单*/
  form{
    font-family: PingFangSC-Regular;
    letter-spacing: -0.6px;
    font-size: 14px;
    input{
      outline: none;
      color: #999999;
    }
    .title{
      margin:20px 0 9px 0;
      color: #2E2E2E;
    }
    .cardNum-input{
      width: 1040px;
      height:60px;
      padding-left:16px;
      box-sizing: border-box;
      border: 1px solid #DDDDDD;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #999999;
      letter-spacing: -0.6px;
      outline: none;
    }
  }
  .cardNum{
    span{
      display: inline-block;
      width:24px;
      height: 15px;
      background: #D8D8D8;
      margin-left: 7px;
    }
    span:nth-child(2){margin-left: 745px;}
  }
  .Cardholder span{display: inline-block;}
  .Cardholder span:nth-child(2){margin: 0 109px 0 497px;}
  .name{
    width: 585px;
    height: 60px;
    padding-left:16px;
    box-sizing: border-box;
    margin-right: 14px;
    vertical-align: middle;
    outline: none;
  }
  .mm,.yy{
    vertical-align: middle;
    width: 65px;
    height: 50px;
    text-align: center;
    outline: none;
    background: transparent;
    &:active{
      background:#2755F6;
      color: #ffffff;
    }
  }
  .yy{margin:0 26px 0 14px;}
  .null{
    width: 267px;
    height: 50px;
  }
  .save{
    display: block;
    width: 1040px;
    height: 57px;
    outline: none;
    background: #459B76;
    ont-family: PingFangSC-Regular;
    font-size: 15px;
    color: #FFFFFF;
    letter-spacing: 0.6px;
    margin-top:50px;
  }



</style>
